<template>
      <div>
            <el-table :data="messageList" style="width: 100%;margin-bottom:10px;">
                  <el-table-column type="index" label="索引" width="100"> </el-table-column>
                  <el-table-column prop="message" label="留言信息" width="500"> </el-table-column>
                  <el-table-column prop="mail" label="留言邮箱" width="180"> </el-table-column>
                  <el-table-column prop="time" label="留言时间" width="150" :formatter="timeFormat"> </el-table-column>
                  <el-table-column prop="ipAddr" label="IP地址" width="120"> </el-table-column>
                  <el-table-column prop="handle" label="操作">
                        <template slot-scope="messageList">
                              <el-button type="info" icon="el-icon-document" circle @click="view($event,messageList.$index,messageList.row)"></el-button>
                              <el-button type="primary" icon="el-icon-message" circle @click="reply($event,messageList.$index,messageList.row)"></el-button>
                              <el-button type="danger" icon="el-icon-delete" circle @click="delMessage($event,messageList.$index,messageList.row)"></el-button>
                        </template>
                  </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="messageAll.length" :page-size="10" @current-change="currentChange"></el-pagination>
            <el-dialog title="留言回复" :visible.sync="dialogVisible" width="35%">
                  <el-form>
                        <el-form-item label="邮箱地址" :label-width="labelWidth">
                              <el-input :value="mail" autocomplete="off" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="内容" :label-width="labelWidth">
                              <el-input type="textarea" v-model="content"></el-input>
                        </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="replyMail">确 定</el-button>
                  </div>
            </el-dialog>
      </div>
</template>

<script>
export default {
      name:'Message',
      props: [],
      data() {
            return {
                  messageAll:[],
                  messageList:[],
                  dialogVisible:false,
                  mail:'',
                  content:'',
                  labelWidth: '100px'
            }
      },
      methods:{
            // 获取留言列表
            getMessageList(){
                  const that=this;

                  this.$axios.get(this.$url+'/message/admin/MessageAll').then(function(res){
                        if(res.data.status.code==200){
                              that.messageAll=res.data.data.messageList;
                              that.messageList=res.data.data.messageList.slice(0,10);
                        }else{
                              that.$message({
                                    message: '未请求到数据，请联系管理员',
                                    type: 'warning'
                              });
                        }
                  })
            },

            add0(m){
                  return m<10?'0'+m:m 
            },

            // 格式化时间
            timeFormat(row, column, cellValue){
                  var time = new Date(cellValue);
                  var y = time.getFullYear();
                  var m = time.getMonth()+1;
                  var d = time.getDate();
                  var h = time.getHours();
                  var mm = time.getMinutes();
                  return y+'/'+this.add0(m)+'/'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm);
            },

            // 改变当前页回调
            currentChange(page){
                  this.messageList=this.messageAll.slice(page*10-10,page*10)
            },

            // 强制button失去焦点
            btnBlur(e){
                  let target = e.target;

                  if(target.nodeName == 'SPAN' || target.nodeName == 'I'){
                  target = e.target.parentNode;
                  }
                  target.blur();
            },

            // 查看留言详情
            view(e,i,row){
                  this.$alert(row.message, '留言详情', {
                        confirmButtonText: '确定'
                  });

                  this.btnBlur(e);
            },

            // 回复邮件
            reply(e,i,row){

                  this.mail=row.mail;
                  this.dialogVisible=true;

                  this.btnBlur(e);
            },

            // 发送回复邮件
            replyMail(){
                  const that = this;

                  if(this.content==''){
                        this.$message({
                              message: '请输入回复内容',
                              type: 'warning'
                        });
                        return
                  }else{
                        let format=new FormData();
                        format.append("mail",this.mail);
                        format.append("content",this.content);
                        this.$axios({
                              method:"post",
                              url:this.$url+'/message/admin/replyMail',
                              data:format
                        }).then(function(res){
                              console.log(res);
                              if(res.data.status.code==200){
                                    that.$message({
                                          message: res.data.status.message,
                                          type: 'success'
                                    });
                              }else{
                                    that.$message({
                                          message: '服务器繁忙，请稍后再试',
                                          type: 'warning'
                                    });
                              }
                        }).catch(function(){
                              that.$message({
                                    message: '未请求到数据，请联系管理员',
                                    type: 'error'
                              });
                        })
                  }
                  
                  this.dialogVisible=false;
            },

            // 取消发送
            cancel(){
                  this.$message({
                        message: '取消发送',
                        type: 'info'
                  });

                  this.dialogVisible=false;
            },

            // 删除留言
            delMessage(e,i,row){

                  console.log(row);
                  const that = this;

                  this.$confirm('此操作将永久删除该留言, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                  }).then(() => {
                        that.$root.loading=true;
                        let format=new FormData();
                        format.append("id",row.id);
                        that.$axios({
                              method:'delete',
                              url:that.$url+'/message/admin/delMessage',
                              data:format
                        }).then(function(res){
                              if(res.data.status.code==200){
                                    that.getMessageList();
                                    that.$root.loading=false;
                                    that.$message({
                                          message: '删除成功',
                                          type: 'success'
                                    });
                              }else{
                                    that.$root.loading=false;
                                    that.$message({
                                          message: '服务器繁忙，请稍后再试',
                                          type: 'warning'
                                    });
                              }
                        }).catch(function(){
                              that.$root.loading=false;
                              that.$message({
                                    message: '删除请求失败，请联系管理员',
                                    type: 'error'
                              });
                        })

                  }).catch(() => {
                        that.$root.loading=false;
                        this.$message({
                              type: 'info',
                              message: '已取消删除'
                        });          
                  });
                  

                  this.btnBlur(e);
            }
      },
      mounted(){
            this.getMessageList();
      }
};
</script>

<style lang="less">
      .el-textarea__inner{
            font-size: 16px;
            resize: none;
            outline: none;
      }
</style>